<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<link rel="stylesheet" type="text/css" href="${path}/static/common/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/common/layui/css/layui.css"/>
</head>
<body>
	<%-- <a class="btn btn-primary" href="${path}/student/getStudentInsertPage.action">添加</a> --%>
	<hr>
	<div class="demoTable">
	  <div class="layui-inline">
	  	 <div class="layui-input-inline">
   			 <label class="layui-form-label">ID：</label>
    		 <div class="layui-input-block">
     			 <input type="text" id="searchId" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    		 </div>
  		 </div>
  		 
	  	 <div class="layui-input-inline">
   			 <label class="layui-form-label"> 商品：</label>
    		 <div class="layui-input-block">
     			 <input type="text" id="searchName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    		 </div>
  		 </div>
	  	 
	  	 <div class="layui-input-inline">
   			 <label class="layui-form-label">  库存：</label>
    		 <div class="layui-input-block">
     			 <input type="text" id="searchStock" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    		 </div>
  		 </div>
	     
	  	<div class = "layui-input-inline">
		  	<button class="layui-btn" data-type="reload" style = "margin-left:40px;margin-top:-5px">搜索</button>
	  	</div>
	
	  	<div class = "layui-input-inline">
		  	<a class="btn btn-primary" href="javascript:void(0)" onclick="insert()" style = "margin-left:80px;" >添加新的商品</a>
	  	</div>
	  	
	  	</div>
	  	
	</div>	
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/html" id="statusTpl">
		{{#		if(d.status == 1) {				}}
					在售
		{{#	    } else if (d.status == 2) {     }}
					下架
		{{#	    } else if (d.status == 3) {		}}
					删除
		{{#     }								}}
	</script>
	
	<script type="text/html" id="mainImageTpl">
		<img src="{{d.mainImageFullUrl}}"/>
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="toolbarDemo">
       <div class="layui-btn-container">
           <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
      </div>
    </script>
	
		<script type="text/javascript">
		// layui包含很多模块，不会都去加载，而是使用哪个模块就去加载哪个模块
		layui.use('table', function(){
		    var table = layui.table;
		  
		    //使用table去渲染表格
			table.render({
			    elem: '#tableId' // 执行要渲染的table的id
			    ,height: 470
			    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			    ,url: '${path}/product/selectByPage.action' //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{field: 'id', title: 'ID', sort: true,width:60}
			      ,{field: 'name', title: '商品名字'}
			      ,{field: 'subtitle', title: '商品副标题',width:160}
			      ,{field: 'mainImage', title: '主图', templet: "#mainImageTpl"}
			      ,{field: 'price', title: '价格',width:80}
			      ,{field: 'stock', title: '库存',width:80}
			      ,{field: 'status', title: '状态',width:80, templet: "#statusTpl"}
			      ,{field: 'createTime', title: '创建时间', templet:"<div>{{!d.createTime?'未知':layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"}
			      ,{field: 'updateTime', title: '更新时间', templet:"<div>{{!d.updateTime?'未知':layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"}
			      ,{title:'操作', toolbar: '#barDemo'}
			    ]]
				,id: 'tableReload'
			});
		    
			//头工具栏事件
			table.on('toolbar(tableFilter)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
			      case 'deleteAll':
			    	  // [{{id: 26, categoryId: 100002, name: "Apple iPhone"},{id: 27, categoryId: 100006, name: "Midea/美的"}]
			          var data = checkStatus.data;
			    	  console.log(data);
			    	  var idArray = []; // [1,2,4]
			    	  for(var i in data) {// i是数组data的下标
			    	  	idArray.push(data[i].id);
			    	  }
			    	  var ids = idArray.join(","); // "1,2,4"
			    	  layer.confirm('真的删除行么', function(index){
			          	$.post(
			          		"${path}/product/deleteAll.action",
			          		{"ids" : ids},
			          		function(result) {
			          			if(result.success) {
			          				mylayer.successMsg(result.msg);
			          				//重新加载表格数据
			          			    table.reload('tableReload');
			          			} else {
			          				mylayer.errorMsg(result.msg);
			          			}
			          			
			          			//layer.close(index);
			          		},
			          		"json"
			          	);
			          });
			      break;
			      //自定义头工具栏右侧图标 - 提示
			      case 'LAYTABLE_TIPS':
			        layer.alert('这是工具栏右侧自定义的一个图标按钮');
			      break;
			    };
			});
		    
			//监听右侧的toolbar的点击事件
			table.on('tool(tableFilter)', function(obj){
			    var data = obj.data;
			    var id = data.id;
			    console.log(id);
			    console.log(data.id);
			    console.log(obj)
			    if(obj.event === 'del'){
			        layer.confirm('真的删除行么', function(index){
			        	$.post(
			        		"${path}/product/deleteById.action",
			        		{"id" : data.id},
			        		function(result) {
			        			if(result.success) {
			        				mylayer.successMsg(result.msg);
			        				//重新加载表格数据
			        			    table.reload('tableReload');
			        			} else {
			        				mylayer.errorMsg(result.msg);
			        			}
			        			
			        			//layer.close(index);
			        		},
			        		"json"
			        	);
			        });
			    } else if(obj.event === 'edit'){
			    			layer.open({
				 				type : 2,
				 				tile : "修改",
				 				area : ["1000px", "650px"],
				 				content : "${path}/product/getUpdateProduct.action?proId="+id+""
				 			});
			    	}	
			    	
			});
		  
		  
			var $ = layui.$, active = {
			    reload: function(){
			      //执行重载
			      table.reload('tableReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {// /product/selectByPage.action?page=1&limit=10&id=26&name=Apple&price=9991
			          id: $("#searchId").val(),
			          name: $("#searchName").val(),
			          stock: $("#searchStock").val()
			        }
			      }, 'data');
			    }
			  };
			  
			  $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
		});
		
		function insert() {
			layer.open({
				type : 2,
				tile : "添加",
				area : ["1000px", "650px"],
				content : "${path}/product/getProductInsertPage.action"
			});
		}
	</script>
	
	
</body>
</html>